<template>
  <!-- 生日客户 -->
  <div style="min-height:350px">
    <Form :model="form" ref="form" :rules="rules" label-position="right" label-width="90">
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="选择渠道">
            <Select v-model="form.branchType" clearable>
              <Option v-for="item in saleChannelList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="管理机构" prop="managecom">
            <Select v-model="form.managecom" clearable>
              <Option v-for="item in organizationList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="销售机构">
            <Select v-model="form.agentgroup" @on-change="val=>getBranchmanager(val,{fileByte:'groupDistrict'})"
              clearable>
              <Option v-for="item in agentgroupList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <!-- bran -->
          <FormItem label="区部组">
            <Select v-model="form.groupDistrict" clearable>
              <Option v-for="item in groupDistrictList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="客户号">
            <Input v-model="form.customerNo" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="客户姓名">
            <Input v-model="form.customerName" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="生日日期" prop="birthday">
            <DatePicker :value="form.birthday" @on-change="val=>$set(form,'birthday',val)" format="yyyy-MM-dd"
              type="date" placeholder="请选择" />
          </FormItem>
        </i-col>
        <i-col span="6" style="display: flex;justify-content: flex-end;">
          <Button type="primary" @click="loadResources" :loading="isLoading" icon="md-search"
            style="margin-right:20px;">查询</Button>
          <Button @click="resetForm(),getDay()" icon="md-refresh">重置</Button>
        </i-col>
      </Row>
    </Form>

    <Table :columns="columns" :data="tableData" :loading="isLoading" ref="selection" style="margin-top:10px">
      <template slot-scope="{ row }" slot="birthday">
        <span v-if="row.birthday">{{row.birthday.slice(0,10)}}</span>
      </template>
      <template slot-scope="{ row }" slot="operate">
        <span class="table-button" @click="showDetail(row)">查看详情</span>
      </template>
    </Table>

    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.pageIndex" :page-size="ipagination.pageSize"
      transfer></Page>

    <Modal title="相关保单" v-model="relatedPoliciesModal" width="80" footer-hide>
      <Table :columns="relatedPoliciesColumns" :data="relatedPoliciesData" style="margin-top:10px">
        <template slot-scope="{ row }" slot="contstateName">
          <div v-if="row.contstateName == '失效'" class="status-error">{{row.contstateName}}</div>
          <div v-else-if="row.contstateName == '终止'" class="status-default">{{row.contstateName}}</div>
          <div v-else class="status-info">{{row.contstateName}}</div>
        </template>
      </Table>
    </Modal>
  </div>
</template>

<script>
import { getSelectListMixin } from "../../util/mixins/getSelectListMixin";
import { loadResourcesMixin } from "../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../util/mixins/tableChangeMixin";
export default {
  name: "birthdayClients",
  mixins: [loadResourcesMixin, tableChangeMixin, getSelectListMixin],
  data() {
    return {
      mixinData: {
        tableAxios: "selectAppntBirthday",
        disableMixinCreated: true,
      },
      relatedPoliciesModal: false,
      relatedPoliciesData: [],
      relatedPoliciesColumns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70,
        },
        {
          title: "管理机构",
          key: "manageComName",
          align: "center",
          minWidth: 150,
        },
        {
          title: "渠道",
          key: "branchTypeName",
          align: "center",
          minWidth: 150,
        },
        {
          title: "销售机构",
          align: "center",
          key: "agentGroupName",
          minWidth: 150,
        },

        {
          title: "保单号",
          key: "contNo",
          align: "center",
          width: 160,
        },
        {
          title: "投保人",
          key: "appntName",
          align: "center",
          width: 120,
        },
        {
          title: "被保人",
          key: "insuredName",
          align: "center",
          width: 120,
        },
        {
          title: "电话",
          key: "phone",
          align: "center",
          width: 150,
        },
        {
          title: "工作单位",
          key: "workUnit",
          align: "center",
          width: 150,
        },
        {
          title: "职业",
          key: "work",
          align: "center",
          minWidth: 150,
        },
        {
          title: "电子邮箱",
          key: "email",
          align: "center",
          minWidth: 150,
        },
        {
          title: "主险名称",
          key: "riskName",
          align: "center",
          minWidth: 150,
        },
        {
          title: "当前保费",
          key: "prem",
          align: "center",
          width: 120,
        },
        {
          title: "保单生效日",
          key: "cvaliDate",
          align: "center",
          width: 120,
        },
        {
          title: "业务员",
          key: "agentName",
          align: "center",
          width: 120,
        },
        {
          title: "专员",
          key: "reAgentName",
          align: "center",
          width: 120,
        },
        {
          title: "保单状态",
          slot: "contstateName",
          align: "center",
          width: 120,
        },
      ],
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
        },
        {
          title: "客户姓名",
          key: "customerName",
          align: "center",
        },
        {
          title: "客户号",
          key: "customerNo",
          align: "center",
        },
        {
          title: "生日日期",
          slot: "birthday",
          align: "center",
        },
        {
          title: "相关保单",
          slot: "operate",
          align: "center",
          width: "130",
          fixed: "right",
        },
      ],
      // tableData:[{}],
      rules: {
        managecom: [
          {
            required: true,
            message: "请选择管理机构",
            trigger: "change",
          },
        ],
        birthday: [
          {
            required: true,
            message: "请选择生日日期",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  created() {
    this.getDay();
  },
  methods: {
    showDetail(row) {
      this.relatedPoliciesData = [];
      this.api
        .selectRelatedPolicy({ customerNo: row.customerNo })
        .then((res) => {
          if (res.code == 200 && res.data != null) {
            this.relatedPoliciesData = res.data.list;
            this.relatedPoliciesModal = true;
          } else this.$Message.info(res.msg);
        });
    },
    getDay() {
      let date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      this.$set(
        this.form,
        "birthday",
        `${year}-${month > 9 ? month : "0" + month}-${
          day > 9 ? day : "0" + day
        }`
      );
    },
    checkMust() {
      // console.log(this.form);
      let flag;
      this.$refs.form.validate((valid) => (flag = valid));
      return flag;
    },
  },
};
</script>

<style scoped>
.status-error {
  border: 0;
  background: #ffefed;
  color: #ff4722;
}

.status-default {
  border: 0;
  background: #eeeeee;
  color: #999999;
}

.status-info {
  border: 0;
  background: #edffef;
  color: #14d595;
}
</style>
